import React, { useState, useEffect } from 'react';
import { BidirectionalBar } from '@ant-design/plots';
import { queryObjectScore } from '@/services/panel'

const CircusChart3 = (props) => {
  const [data, setData] = useState(null)
  const { year, quarter, type } = props
  useEffect(()=>{
    // getData()
    setData([
      {
        country: '0-20',
        '权重': 5,
        '分数': 8,
      },
      {
        country: '20-40',
        '权重': 13,
        '分数': 3,
      },
      {
        country: '40-60',
        '权重': 24,
        '分数': 32,
      },
      {
        country: '60-80',
        '权重': 36,
        '分数': 46,
      },
      {
        country: '80-100',
        '权重': 17,
        '分数': 6,
      },
    ])
  },[year, quarter, type])
  const getData = async () => {
    const res = await queryObjectScore({year, quarter, type})
    if(res.code = 200){
      if(res.data.length > 0){
        const list = res.data.map((item)=>{
          return { type: item.type,value: Number(item.value) }
        })
        setData(list);
      }
    }
  }
  const config = {
    // width: 300,
    height: 200,
    appendPadding: 10,
    data,
    xField: 'country',
    yField: ['权重', '分数'],
    xAxis: {
      position: 'bottom',
    },
    tooltip: {
      shared: true,
      showMarkers: false,
    },
    interactions: [
      {
        type: 'active-region',
      },
    ],
  };
  return <>{data && data.length > 0 && <BidirectionalBar {...config} />}</>;
};
export default CircusChart3